<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mask-wrapper {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
      }
      .mask-wrapper .content{
        position: absolute;
        left: 0;right: 0;top: 0; bottom: 0;
        margin: auto;
        width: 300px;
        height: 150px;
        background: white;
        border-radius: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- input区域 -->
      <div class="tab">
        <input placeholder="请输入代办任务" v-model="val" />
        <button @click="add">添加</button>
      </div>
      <!-- 列表区域 -->
      <div class="list">
        <div v-if="!todos.length">暂无任务</div>
        <ul v-else>
          <li v-for="(item,index) in todos">
            <p>{{ item.task }}</p>
            <div class="btn-container">
              <button @click="openMask(item.task,index)">编辑</button>
              <button @click="del(index)">删除</button>
            </div>
          </li>
        </ul>
      </div>

      <!-- 遮罩区域 -->
      <div class="mask-wrapper" v-if = "maskFlag" @click.self="closeMask">
        <div class="content">
          <input type="text" name="" id=""  v-model="v"/>
          <hr />
          <button @click="closeMask">取消</button>
          <button @click="edit">确定</button>
        </div>
      </div>
    </div>
  </body>
  <script src="../../lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          val: "",
          v: '',
          activeIndex: 0,
          maskFlag: false,
          todos: [
            {
              id: 1,
              task: "任务1",
            },
            {
              id: 2,
              task: "任务2",
            },
          ],
        };
      },
      methods: {
        openMask (task,index) {
          this.maskFlag = true 
          this.v = task
          this.activeIndex = index 
        },
        closeMask () {
          this.maskFlag = false 
        },
        add() {
          this.todos.unshift({
            id: this.todos.length + 1,
            task: this.val,
          });
          this.val = "";
        },
        del(index) {
          this.todos.splice(index, 1);
        },
        edit () {
          this.todos[this.activeIndex].task = this.v 
          this.closeMask()
        }
      },
    }).mount("#app");
  </script>
</html>
